<template>
  <div class="main_bottom">
    <div class="main_content_top">
      <div class="top_left">
        <div class="top_left_title">测试结果</div>
        <div class="top_left_content">
          <div class="content_item" style="border-bottom: 2px solid #ECEEF1;" v-for="(item,index) in samplesData" :style="{marginLeft:index % 2!==0?'5px':'0px'}">
            <div class="item_content" style="background: #F23541;" :style="{background:item.rlt==='OK'?'green':'#F23541'}">
              <div class="item_text">穴位{{index+1}}：{{ item.rlt }}</div>
              <div class="item_src">
                <img src="../../assets/20240725215939.png">
              </div>
              <div class="item_white">
                <div>{{ item.qrcode }}</div>

              </div>
            </div>
          </div>
          <!-- <div class="content_item" style="margin-left: 5px;border-bottom: 2px solid #ECEEF1">
    <div class="item_content" style="background: #F23541;">
      <div class="item_text">模块1：NG</div>
      <div class="item_src">
        <img src="../../assets/20240725215939.png">
      </div>
      <div class="item_white">02356CCA**H2644</div>
    </div>
  </div> -->

        </div>
      </div>
      <div class="top_center">
        <div class="top_center_title">投产数据</div>
        <div class="top_center_content">
          <div class="content_item" style="flex: 2;border-right: 2px solid #ECEEF1;">
            <div class="list_item" style="width: 300px;">
              <span class="item_text1">产品名称：</span>
              <el-dropdown @command="handleCommand" placement="bottom-start">
                            <span class="item_text2">
                                {{ totalData.productName }} <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in productList" :key="item" :command="item">
                    {{ item }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="list_item" style="width: 300px;margin-top: 10px;">
              <span class="item_text1">生产颜色：</span>
              <span class="item_text2">{{ totalData.curColor }}</span>
            </div>
          </div>
          <div class="content_item">
            <div class="list_item" style="width: 220px;">
              <span class="item_text1">总投产数：</span>
              <span class="item_text2">{{ totalData.countAll }}</span>
            </div>
            <div class="list_item" style="width: 220px;margin-top: 10px;">
              <span class="item_text1">外观良率：</span>
              <span class="item_text2">{{ totalData.rateWg }}%</span>
            </div>

          </div>
          <div class="content_item">
            <div class="list_item" style="width: 220px;">
              <span class="item_text1">总良品数：</span>
              <span class="item_text2">{{ totalData.countOk }}</span>
            </div>
            <div class="list_item" style="width: 220px;margin-top: 10px;">
              <span class="item_text1">辅料良率：</span>
              <span class="item_text2">{{ totalData.rateFl }}%</span>
            </div>

          </div>
          <div class="content_item">
            <div class="list_item" style="width: 220px;">
              <span class="item_text1">良率：</span>
              <span class="item_text2">{{ totalData.rateAll}}%</span>
            </div>
            <div class="list_item" style="width: 220px;margin-top: 10px;">
              <span class="item_text1">CT：</span>
              <span class="item_text2">{{ totalData.ct }}s</span>
            </div>
          </div>
        </div>
        <div class="top_center_title" style="position:relative">
          当前班次数据 ( {{ banci.start }} ~ {{ banci.end }} )
          <span class="title_edit" @click="editRank">
                <img src="../../assets/ic_homepage_edit.png">
              </span>
        </div>
        <div class="bottom_table">
          <div class="table_list">
            <div class="table_title">
              <div class="title_item" v-for="item in tableModels" :style="{width:100/(tableModels.length)+'%'}">
                {{ item.label }}
              </div>
              <!-- <div class="title_item" >
                8:00
              </div> -->
            </div>
            <div class="table_content">
              <div class="table_item">
                <div class="item_main">投入</div>
                <div class="item_main">良品</div>
                <div class="item_main">良率</div>
              </div>
              <div class="table_item" v-for="item in teamProductDatas">
                <div class="item_main" style="text-align: center;">{{ item.all }}</div>
                <div class="item_main" style="text-align: center;">{{ item.good }}</div>
                <div class="item_main" style="text-align: center;">{{ item.yield}}%</div>
              </div>
            </div>
          </div>

          <!-- <el-table
stripe
:data="table.tableData"
highlight-current-row
border
style="width: 100%" height="100%"
:header-cell-style="{fontSize: '14px', backgroundColor: '#DBDFE5',color:'#2A2A2A'}">
>
<el-table-column
  v-for="tableModel in table.tableModels"
  :key="tableModel.key"
  :prop="tableModel.key"
  :label="tableModel.label"
  :width="tableModel.width"
>
  <template #default="{ row }">
    <span>
      {{ row[tableModel.key] }}
    </span>
  </template>
</el-table-column>
</el-table> -->

        </div>
      </div>

      <div class="top_right">
        <div class="right_item" @click="tabClick(1)">
          <span class="right_img"><img src="../../assets/bt_homepage_operator.png"></span>
          <span class="right_text">{{enum_role[userInfoStore.userType]}}</span><!-- 操作员 -->
        </div>
        <div class="right_item" @click="tabClick(2)">
          <span class="right_img"><img src="../../assets/bt_homepage_pause.png" :src="runStatus?start:pause"></span>
          <span class="right_text">{{ runStatus?'暂停中':'运行中' }}</span>
        </div>
        <div class="right_item" @click="tabClick(3)">
          <span class="right_img"><img src="../../assets/bt_homepage_stop.png"></span>
          <span class="right_text">急停</span>
        </div>
        <div class="right_item" @click="tabClick(4)">
          <span class="right_img"><img src="../../assets/bt_homepage_clear.png"></span>
          <span class="right_text">解除警报</span>
        </div>
        <div class="right_item" @click="tabClick(5)">
          <span class="right_img"><img src="../../assets/bt_homepage_check.png"></span>
          <span class="right_text">点检</span>
        </div>
        <!-- <div class="right_item" style="border-bottom: none;">
            <span class="right_switch">
                <el-switch disabled></el-switch>
            </span>
            <span class="right_text">自动模式</span>
        </div> -->
      </div>

    </div>
    <div class="main_content_bottom">
      <div class="bottom_list" style="border-right: 2px solid #EBEFF5;">
        <div class="top_center_title">外观缺陷TOP5数据</div>
        <div id="echartsDom" style="width: 639px; height: 363px"></div>
      </div>
      <div class="bottom_list" style="border-right: 2px solid #EBEFF5;">
        <div class="top_center_title">辅料缺陷TOP5数据</div>
        <div id="echartsDom2" style="width: 639px; height: 363px"></div>
      </div>
      <div class="bottom_list" style="overflow-y: auto;height: 100%">
        <div class="top_center_title">
          <p>预警日志</p>
          <el-button @click="clearLogs" style="margin-right: 20px" type="text">清空</el-button>
        </div>
        <div class="bottom_status" style="overflow: auto;flex-direction: column">
          <div ref="consoleOutput" class="status_content" @scroll="handleScroll">
            <div class="status_item" v-for="item in warnLog" :style="{color:item.color}">{{ item.timestamp }} : {{ item.message }}</div>
          </div>
          <div class="top_center_title" style="margin-top: 10px;width: 100%;padding-left: 0px;text-indent: 10px">运行日志</div>
          <div ref="consoleOutputLog" class="status_content" @scroll="handleScrollLog">
            <div class="status_item" v-for="item in logs" :style="{color:item.color}">{{ item.timestamp }} : {{ item.message }}</div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-dialog title="修改班次时间" :visible.sync="dialogFormVisible" width="620px">
        <el-form :model="query">
          <el-form-item label="起始时间" :label-width="formTimeWidth">
            <el-time-picker v-model="curStartTime" :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
            }" placeholder="开始时间" value-format="HH:mm:ss">
            </el-time-picker>
            <el-time-picker v-model="curEndTime" :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
            }" placeholder="结束时间" value-format="HH:mm:ss">
            </el-time-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmTime">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="用户登录" :visible.sync="userVisible">
        <el-form :model="user">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input placeholder="请输入用户名" v-model="user.userName" @focus="resetPasswordError"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input placeholder="请输入密码" type="password" v-model="user.password"
                      @focus="resetPasswordError"></el-input>
            <span style="color: red; font-size: 14px" v-if="passwordIsError">用户或密码错误</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="userVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmUser(0)">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="点检操作" :visible.sync="is_showSpotCheck" :show-close="spotCheckRetInfo.status!=0" width="500px" :close-on-click-modal="false">
        <el-form style="margin-top: -30px">
          <h4> 步骤一</h4>
          <div style="padding-left:10px">
            <el-form-item>
              <el-button type="primary" @click="oneClickSpotCheck" :disabled="spotCheckRetInfo.status==0">自动点检</el-button>
              <el-select v-model="spotCheckOption">
                <el-option :value="0" label="硬件和软件"></el-option>
                <el-option :value="1" label="仅硬件"></el-option>
                <el-option :value="2" label="仅软件"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="硬件点检">
              <el-progress :percentage="spotCheckRetInfo.auto_hard.percentage" ></el-progress>
            </el-form-item>
            <el-form-item label="软件点检">
              <el-progress :percentage="spotCheckRetInfo.auto_soft.percentage"></el-progress>
            </el-form-item>

          </div>
          <h4>步骤二</h4>
          <div style="padding-left:10px">

            <el-form-item label="" >
              <div style="display: inline-block;width:100%">
                <el-button type="primary" @click="manualSpotCheck" :disabled="is_disSpotCheckManual||spotCheckRetInfo.status==0">手动点检</el-button>
              </div>
            </el-form-item>
          </div>
          <el-form-item label="点检日志" style="">
            <div ref="consoleOutputCheck" class="console-output" @scroll="handleScrollCheck" style="
                    overflow-x: hidden;height: 150px;width:100%;border: 1px solid  #409eff;padding-left: 10px;line-height: 18px;">
              <p v-for="(log, index) in spotCheckLogs" :key="index" :style="{ color: log.color }">
                {{ log.msg }}
              </p>
            </div>

          </el-form-item>
          <!-- <el-form-item label="" >
            <div style="display: inline-block;width:100%;margin-left:10px">
              <el-button type="primary" @click="is_showSpotCheck=false" :disabled="spotCheckRetInfo.status==0">点检完成</el-button>
            </div>
          </el-form-item> -->
        </el-form>
      </el-dialog>
      <el-dialog title="手动点检" :visible.sync="is_showSpotCheckManual" width="800">
        <el-table :data="okNgData" ref="addTable" @selection-change="selectOkNg" :max-height="500">
          <!-- @selection-change="selectOkNg" -->
          <el-table-column prop="module" label="模块"></el-table-column>
          <el-table-column prop="parts" label="部件"></el-table-column>
          <el-table-column prop="info" label="点检信息"></el-table-column>
          <el-table-column prop="way" label="点检方法" width="180"></el-table-column>
          <el-table-column prop="standard" label="点检标准" width="180"></el-table-column>
          <el-table-column prop="opt" label="点检结果" width="180">
            <template slot-scope="scope">
              <div>
                <!-- <span>{{ scope.row.parts }}</span> -->
                <!-- <el-radio-group v-model="scope.row.opt" @change="selectOkNg(scope.row)"> -->
                <el-checkbox label="OK" v-model="scope.row.checkedOK" @change="(v)=>changeCheckOK(v,scope.row)">OK
                </el-checkbox>
                <el-checkbox label="NG" v-model="scope.row.checkedNG" @change="(v)=>changeCheckNG(v,scope.row)">NG
                </el-checkbox>
                <!-- </el-radio-group> -->

              </div>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
                        <el-button @click="is_showSpotCheckManual = false">取 消</el-button>
                        <el-popconfirm @confirm="addSaveSpotCheckManual"
  :title="confirmSpotCheckManualText"
>
                        <el-button type="primary"  slot="reference" @click="spotCheckManualConfirm">确 定</el-button>
                    </el-popconfirm>
                    </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import qwebchannel from '../../qt5.15webchannel.js';
import * as echarts from 'echarts';
import { Message } from 'element-ui';
import { mapState } from 'vuex';
import { saveUserInfoStore, saveUserStoreLimits } from '../../store/actions.js';
import {formatCurrentShiftTime, formatCurrentTime, validPermision} from '../../utils/tools.js';
import { ENUM_ROLE } from '../../utils/const.js';
import startImg from '../../assets/bt_homepage_run.png'
import pauseImg from '../../assets/bt_homepage_pause.png'
import {formatDate} from "../../utils/tools";

export default {
  name: 'BoneDen',
  computed: {
    ...mapState(['userStoreLimits', 'userInfoStore']),

  },
  data() {
    return {
        confirmSpotCheckManualText:'',
        is_disSpotCheckManual:false,
      spotCheckLogs: [],
      selectedSpotCheckManual:[],
      okNgData: [],
      is_showSpotCheckManual:false,
      is_showSpotCheckClose:true,
      spotCheckOption:0,
      spotCheckStatus: 0,
      is_showSpotCheck:false,
      banci:{start:'',end:''},
      enum_role: ENUM_ROLE,
      option: null,
      option2: null,
      runStatus: false,
      dialogFormVisible: false,
      userVisible: false,
      passwordIsError: false,
      intervalId: null,
      qtCall: null,
      start: startImg,
      pause: pauseImg,
      warnLog: [],
      role: 1,
      myChart: null,
      myChart2: null,
      formLabelWidth: '80px',
      formTimeWidth: '80px',
      user: {
        userName: '',
        password: ''
      },
      query: {
        startTime: formatCurrentTime(),
        endTime: formatCurrentTime(),
      },
      curStartTime: formatCurrentShiftTime(),
      curEndTime: formatCurrentShiftTime(),
      productList: [], // 产品列表

      totalData: { //数据
        productName: "", //产品名称
        productColor: "", //生产颜色
        curColor: "", //生产颜色
        ct: 0, //ct时间
        countAll: 0, //总数
        countOk: 0, //ok数
        countNg: 0, //ng数
        rateAll: 0, //总良率
        rateWg: 0, //外观良率
        rateFl: 0 //辅料良率
      },

      samplesData: [ //实时样本数据
        // {
        //     qrcode: "02353CCB++82402061A4001553320242181190450",//条码
        //     dateTime: "2024-06-18 12:00:00",//测试时间
        //     acupoint: "1",//
        //     rlt: "OK",//结果
        //     wg: "压伤",//外观缺陷
        //     fl: "背胶膜缺失"	//辅料缺陷
        // },
        // {
        //     qrcode: "02353CCB++82402061A4001553320242181190450",//条码
        //     dateTime: "2024-06-18 12:00:00",//测试时间
        //     acupoint: "1",//
        //     rlt: "OK",//结果
        //     wg: "压伤",//外观缺陷
        //     fl: "背胶膜缺失"	//辅料缺陷
        // },
        // {
        //     qrcode: "02353CCB++82402061A4001553320242181190450",//条码
        //     dateTime: "2024-06-18 12:00:00",//测试时间
        //     acupoint: "1",//
        //     rlt: "OK",//结果
        //     wg: "压伤",//外观缺陷
        //     fl: "背胶膜缺失"	//辅料缺陷
        // },
        // {
        //     qrcode: "02353CCB++82402061A4001553320242181190450",//条码
        //     dateTime: "2024-06-18 12:00:00",//测试时间
        //     acupoint: "1",//
        //     rlt: "OK",//结果
        //     wg: "压伤",//外观缺陷
        //     fl: "背胶膜缺失"	//辅料缺陷
        // },
        // {
        //     qrcode: "02353CCB++82402061A4001553320242181190450",//条码
        //     dateTime: "2024-06-18 12:00:00",//测试时间
        //     acupoint: "1",//
        //     rlt: "OK",//结果
        //     wg: "压伤",//外观缺陷
        //     fl: "背胶膜缺失"	//辅料缺陷
        // },
        // {
        //     qrcode: "02353CCB++82402061A4001553320242181190450",//条码
        //     dateTime: "2024-06-18 12:00:00",//测试时间
        //     acupoint: "1",//
        //     rlt: "OK",//结果
        //     wg: "压伤",//外观缺陷
        //     fl: "背胶膜缺失"	//辅料缺陷
        // },

      ],
      tableModels: [{
        label: '',
        key: 'space',
        align: 'center',
        headerAlign: 'center',
      },
        // {
        //   label: '01:00',
        //   key: 'space',
        //   align: 'center',
        //   headerAlign: 'center',
        // },
        // {
        //   label: '03:00',
        //   key: 'space',
        //   align: 'center',
        //   headerAlign: 'center',
        // }

      ],
      logs: [
        // {
        //     dateTime: "2024-12-16 01:00:00-000",
        //     color: "green",
        //     log: "输出1"
        // },
        // {
        //     dateTime: "2024-12-16 01:00:10-123",
        //     color: "red",
        //     log: "输出2"
        // }
      ],

      teamProductDatas: [
        // {
        //     label: "01:00",	//时间
        //     all: "1",	//投入总数
        //     good: "1",		//良品数
        //     yield: "1"		//良率
        // },
        // {
        //     label: "03:00",
        //     all: "100",
        //     good: "60",
        //     yield: "60"
        // },
        // {
        //     label: "05:00",
        //     all: "100",
        //     good: "60",
        //     yield: "60"
        // },
        // {
        //     label: "07:00",
        //     all: "100",
        //     good: "60",
        //     yield: "60"
        // },
        // {
        //     label: "09:00",
        //     all: "100",
        //     good: "60",
        //     yield: "60"
        // },
        // {
        //     label: "11:00",
        //     all: "100",
        //     good: "60",
        //     yield: "60"
        // }
      ],
      wgDefectTop: [
        // {
        //       label: "10-c-压伤",
        //       value: 1
        //   },
        //   {
        //       label: "3-压伤",
        //       value: 2
        //  },
        //   {
        //       label: "12-脏污",
        //       value: 3
        //   },
        //   {
        //       label: "12-压伤",
        //       value: 4
        //  },
        //   {
        //       label: "9-3 压伤",
        //       value: 5
        //   }
      ],
      wgOther: [],
      flOther: [],
      flDefectTop: [
        // {
        //       label: "10-c-压伤",
        //       value: 1
        //   },
        //   {
        //       label: "3-压伤",
        //       value: 2
        //  },
        //   {
        //       label: "12-脏污",
        //       value: 3
        //   },
        //   {
        //       label: "12-压伤",
        //       value: 4
        //  },
        //   {
        //       label: "9-3 压伤",
        //       value: 5
        //   }
      ],
      scrollThreshold: 100,
      message: "此操作将切换产品, 是否继续?",
      status_message: '正在切换中...',
      loading: null,
      spotCheckRetInfo:{auto_hard:{percentage: 0.01*100},auto_soft:{percentage:0.0*100},status:1},
      someDefaultData :{acuCount:0}
    }
  },
  created() {

  },
  mounted() {
    console.log('v0.1')
    if (process.env.NODE_ENV != 'production') {
      this.spotCheckRetInfo.auto_hard.percentage = this.spotCheckRetInfo.auto_hard.percentage.toFixed(0)
      for (let index = 0; index < 8; index++) {
        this.okNgData.push(
          {
            id:index,
            module: '模块',
            parts: 'bujian',
            info: 'xinxi',
            way: 'fangfa',
            standard: 'biaozhun',
            opt: "OK",
            checkedOK: false,
            checkedNG: false
          })
      }
      for (let index = 0; index < 8; index++) {
        // this.spotCheckLogs.push({msg:"点检日志内容1",color:"#2a2a2a"})
        setTimeout(() => {
          this.updateLogs({msg:"点检日志内容1",color:"#2a2a2a"})
        }, 1200);
      }
      setTimeout(() => {
        this.updateLogs({msg:"点检日志内容1",color:"#ff0000"})
      }, 2000);
    }
    setTimeout(() => {
      // validPermision()
      if (process.env.NODE_ENV === 'production') {
        let nearLog = []
        // new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
        // this.qtCall = channel.objects.webBridge;
        this.qtCall = this.$qtCall
        this.qtCall.QtToJs.connect((func, json) => {
          if(func == 'RefreshSpotCheckManualCheckList'){
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              console.log('RefreshSpotCheckManualCheckList返回', datas.data)
              this.okNgData = datas.data['checklist']
            }
          }
          if( func == 'RefreshSpotCheckStatus') {
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              console.log('RefreshSpotCheckStatus返回', datas.data)
              //进度
              //   var auto_soft = datas.data['auto_soft']
              //   var auto_hard = datas.data['auto_hard']
              //   var spotCheckStatus = datas.data['status']
              datas.data['auto_soft']['percentage'] =  Number(datas.data['auto_soft']['percentage']).toFixed(0)
              datas.data['auto_hard']['percentage'] = Number(datas.data['auto_hard']['percentage']).toFixed(0)

              this.spotCheckRetInfo = datas.data
              var msgs = datas.data['msgs']
              msgs.forEach(item=>{
                this.updateLogs(item)
              })

            }
          }
          if (func === "RefreshCurrentTeamProductDataInRunningState") {

            const datas = JSON.parse(json)
            if (datas.code === 200) {
              this.banci.start =  datas.data['start']
              this.banci.end =  datas.data['end']
              this.tableModels = [{
                label: '',
                key: '',
                align: '',
                headerAlign: '',
              }]
              this.teamProductDatas = datas.data.teamProductDatas
              for (var i = 0; i < this.teamProductDatas.length; i++) {
                const modelItem = {
                  label: '',
                  key: '',
                  align: '',
                  headerAlign: '',
                }
                modelItem.label = this.teamProductDatas[i].label
                modelItem.key = this.teamProductDatas[i].label
                modelItem.align = 'center'
                modelItem.headerAlign = 'headerAlign'

                this.tableModels.push(modelItem)
              }
            }
          }
          if (func === "RefreshNearLog") {
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              this.logs.push(...datas.data.logs.map(log => {
                if ( log.type === 11 ) return null; // 跳过数据
                return {
                  timestamp: log.dateTime,
                  message: log.log,
                  color: log.color
                }
              }).filter(log => log !== null));

              this.warnLog.push(...datas.data.logs.map(log => {
                if (log.type === 1 || log.type === 2 || log.type === 3) return null; // 跳过数据
                return {
                  timestamp: log.dateTime,
                  message: log.log,
                  color: log.color
                }
              }).filter(log => log !== null));
              this.scrollToBottom();
            }
          }
          if (func === "RefreshLastLog") {
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              this.logs.push(...datas.data.logs.map(log => {
                if ( log.type === 11 ) return null; // 跳过数据
                return {
                  timestamp: log.dateTime,
                  message: log.log,
                  color: log.color
                }
              }).filter(log => log !== null));

              this.warnLog.push(...datas.data.logs.map(log => {
                if (log.type === 1 || log.type === 2 || log.type === 3) return null; // 跳过数据
                return {
                  timestamp: log.dateTime,
                  message: log.log,
                  color: log.color
                }
              }).filter(log => log !== null));

              this.scrollToBottom();
            }
          }
          if (func === "RefreshWgDefectTop") {

            const datas = JSON.parse(json)
            if (datas.code === 200) {
              this.wgDefectTop = []
              this.wgDefectTop = datas.data.wgDefectTop.reverse()
              this.wgOther = datas.data.other
              this.init()
            }
          }
          if (func === "RefreshFlDefectTop") {

            const datas = JSON.parse(json)
            if (datas.code === 200) {
              this.flDefectTop = []
              this.flDefectTop = datas.data.flDefectTop.reverse()
              this.flOther = datas.data.other
              this.init2()
            }
          }
          if (func === "RefreshRealData") {
            console.log("Get the return content of the RefreshRealData interface")
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              this.samplesData = datas.data.samplesData
              console.log("======================= 实时条码刷新日志 =====================================")
              console.log("Get the total production number from QT :", datas.data.totalData)
              console.log('samplesData：',this.samplesData)
              this.totalData = datas.data.totalData
              var acucount = this.someDefaultData['acuCount']
              console.log('acucount:',acucount)
              this.samplesData = this.samplesData.slice(0, acucount)
              console.log('截取后的samplesData:', this.samplesData)
            }
          }
          if (func === "setSomeDefaultData") {
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              this.someDefaultData = datas.data
              this.totalData.productName = datas.data.curName;
              this.totalData.curColor = datas.data.curColor;
              this.productList = [];
              this.productList.push(...datas.data.productNames.map(log => {
                if (log.label === "全部") return null;
                return log.label;
              }).filter(log => log !== null));
            }
          }
          if (func === "RefreshRunStatus") {
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              console.log('打印接口返回RefreshRunStatus', datas)
              this.runStatus = datas.data.state === 0
            }
          }
          if (func == "setSomeDefaultData") {
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              this.query.startTime = datas.data.startTime
              this.query.endTime = datas.data.endTime
            }
          }
          if (func === "GetTextWhenSwitchingProducts") {
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              console.log("GetTextWhenSwitchingProducts: ", datas.data)
              this.message = datas.data.text
            }
          }
          if (func === "GetStatusMessageWhenSwitchingProducts") {
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              console.log("GetStatusMessageWhenSwitchingProducts: ", datas.data)
              this.status_message = datas.data.text
              if (this.loading !== null) {
                console.log("修改loading里的信息")
                this.loading.text = this.status_message;
              }
            }
          }
        })
        this.qtCall.JsToQt("NeedRefreshRealData", ''); //可以传给qt
        this.qtCall.JsToQt("wantRunStatus", {}); //可以传给qt
        this.qtCall.JsToQt("SetTextWhenSwitchingProducts", {});
        //   });

        validPermision()
      } else {
        const productList = [
          '全部',
          'L9503AA',
          'L9503BA',
          'L9503CA'
        ];
        this.productList.push(...productList.map(log => {
          if (log === "全部") return null;
          return log;
        }).filter(log => log !== null));
        const wg_data = {
          "code": 200,
          "data": {
            "other": [
              {
                "label": "外观6",
                "value": "1.00"
              },
              {
                "label": "外观7",
                "value": "1.00"
              },
              {
                "label": "外观8",
                "value": "1.00"
              }
            ],
            "wgDefectTop": [
              {
                "label": "外观1",
                "value": "10"
              },
              {
                "label": "外观2",
                "value": "8"
              },
              {
                "label": "外观3",
                "value": "6"
              },
              {
                "label": "外观4",
                "value": "4"
              },
              {
                "label": "外观5",
                "value": "4"
              },
              {
                "label": "其它",
                "value": "3"
              }
            ]
          },
          "msg": ""
        }
        this.wgDefectTop = wg_data.data.wgDefectTop.reverse()
        this.wgOther = wg_data.data.other
        this.flDefectTop = wg_data.data.wgDefectTop
        this.flOther = wg_data.data.other
        this.init();
        this.init2();
      }
    }, 200);

    // this.init()

    // if(this.samplesData.length>6){
    //   console.log(this.samplesData.length)
    //   this.$set(this.samplesData,6,'')

    // }

    // this.init()
    // let that = this
    // this.intervalId = setInterval(function(){
    //       console.log(that.wgDefectTop)
    //       that.init()

    // }, 10000);

    // else{
    //   if(this.samplesData.length>6){
    //     this.samplesData.length = 6

    //   }
    //   this.init()
    // }

  },
  beforeDestroy() {
    this.intervalId = null
    // this.qtCall = null
  },
  methods: {
    changeStatus() {
            this.addForm.status = 'OK'
            this.okNgData.forEach(item => {
                if (item.checkedNG == true) {
                    this.addForm.status = 'NG'
                }
            })
        },
        changeCheckOK(val, row) {
            if (val == true) {
                // this.check
                row.checkedNG = false

                this.changeStatus()
            }
        },
        changeCheckNG(val, row) {
            if (val == true) {
                // this.check
                row.checkedOK = false
                this.changeStatus()
            }
        },
    updateLogs(log) {
      this.spotCheckLogs.push(log);
      this.scrollToBottomcheck();
    },
    scrollToBottomcheck() {
      this.$nextTick(() => {
        setTimeout(() => {
          const consoleOutput = this.$refs.consoleOutputCheck;
          consoleOutput.scrollTop = consoleOutput.scrollHeight;


        }, 300); // 设置延迟，确保 DOM 渲染完成
      });
    },

    oneClickSpotCheck(){
      if(process.env.NODE_ENV!='production'){
        this.spotCheckRetInfo.status = 0
      }
      //调用一键点检接口
      this.spotCheckLogs = []
      var param = {type: this.spotCheckOption}
      console.log('NeedStartSpotCheck传参', param)
      this.$qtCall.JsToQt('NeedStartSpotCheck',param)
    },
    spotCheckManualConfirm(){
        var selections = []
      this.selectedSpotCheckManual = []
      for (let index = 0; index < this.okNgData.length; index++) {
        const element = this.okNgData[index];
        if (element.checkedNG == true || element.checkedOK == true) {
          selections.push(element)
          if(element.checkedNG == true){
            var obj = {id:element.id,result:"NG"}
            this.selectedSpotCheckManual.push(obj)
          }else{
            this.selectedSpotCheckManual.push({id:element.id,result:"OK"})
          }
        }
      }
      this.confirmSpotCheckManualText = '总共:'+this.okNgData.length+'条,选中:'+selections.length+'条'
    },
    addSaveSpotCheckManual(){



      var param = {checklist:this.selectedSpotCheckManual}
      console.log('NeedAddSpotCheckList保存手动点检传参', param)
      if(process.env.NODE_ENV=='production'){
        this.$qtCall.JsToQt("NeedAddSpotCheckList", param)
      }

      this.is_showSpotCheckManual = false
      this.is_disSpotCheckManual = true
    },
    handleCommand(value) {
      // 处理产品名称变化的逻辑
      const selectedProduct = this.productList.find(item => item === value);
      console.log("开始打印提示！！")
      if (selectedProduct && this.totalData.productName !== selectedProduct) {
        this.$confirm(this.message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = this.$loading({
            lock: true,
            text: this.status_message,
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });

          if (process.env.NODE_ENV === 'production') {
            const data = {
              value: selectedProduct
            }
            this.qtCall.JsToQt("OneKeySwitchTemplate", data); //可以传给qt
            this.qtCall.QtToJs.connect((func, json) => {
              if (func === "RefreshProductNameState") {
                const datas = JSON.parse(json)
                if (datas.code === 200) {
                  this.loading.close();
                  if (datas.data.type === 0) {
                    this.totalData.productName = selectedProduct;
                    this.$message({
                      type: 'success',
                      message: '切换成功!'
                    });
                  } else {
                    this.$message({
                      type: 'success',
                      message: '切换失败!'
                    });
                  }
                }
              }
            })
          } else {
            setTimeout(() => {
              this.loading.close();
              this.totalData.productName = selectedProduct;
              this.$message({
                type: 'success',
                message: '切换成功!'
              });
            }, 2000);
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消切换'
          });
        });
      }
    },
    confirmTime() {

      if (!this.curStartTime) {
        Message.warning('请输入开始时间')
        return;
      }
      if (!this.curEndTime) {
        Message.warning('请输入结束时间')
        return;
      }
      console.log(this.curStartTime, typeof this.curStartTime)
      console.log(this.curEndTime, typeof this.curEndTime)
      console.log('打印班次时间', this.query)
      if (this.curStartTime >= this.curEndTime){
        Message.warning('开始时间不能大于结束时间')
        return;
      }

      if (process.env.NODE_ENV === 'production') {
        const data = {
          startTime: this.curStartTime,
          endTime: this.curEndTime
        }

        this.qtCall.JsToQt("UpdateOnWorkTime", data); //可以传给qt
        this.qtCall.QtToJs.connect((func, json) => {
          if (func === "RefreshCurrentTeamProductDataInRunningState") {
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              this.tableModels = [{
                label: '',
                key: '',
                align: '',
                headerAlign: '',
              }]
              this.teamProductDatas = datas.data.teamProductDatas
              for (var i = 0; i < this.teamProductDatas.length; i++) {
                const modelItem = {
                  label: '',
                  key: '',
                  align: '',
                  headerAlign: '',
                }
                modelItem.label = this.teamProductDatas[i].label
                modelItem.key = this.teamProductDatas[i].label
                modelItem.align = 'center'
                modelItem.headerAlign = 'headerAlign'

                this.tableModels.push(modelItem)
              }
              this.dialogFormVisible = false
            }
          }
        })
      }
    },
    editRank() {
      this.dialogFormVisible = true
    },
    confirmUser(val) {
      this.passwordIsError = false;
      if (val != 0 && process.env.NODE_ENV !== 'production') {
        return
      }
      if (!this.user.userName) {
        Message.warning('请输入用户名')
        return
      }
      if (!this.user.password) {
        Message.warning('请输入用户密码')
        return
      }
      const data1 = {
        user: this.user.userName,
        password: this.user.password
      }
      this.qtCall.JsToQt("NeedLoginUser", data1); //可以传给qt
      this.qtCall.QtToJs.connect((func, json) => {
        if (func == "RefreshLogin") {
          const datas = JSON.parse(json)
          if (datas.code === 200) {
            if (!datas.data.status) {
              this.passwordIsError = true;
              return ;
            }
            this.userVisible = false
            // localStorage.setItem('userInfo',JSON.stringify(datas.data.user))
            this.$store.dispatch('saveUserInfoStore', datas.data['user'])
            this.qtCall.JsToQt("NeedRefreshAllUserLimits", {}); //请求权限
            setTimeout(() => {
              // var select_menu = 0
              validPermision(0)
            }, 400);
          }
        }
        if (func == "RefreshAllUserLimits") {
          const datas = JSON.parse(json)
          if (datas.code === 200) {
            this.userVisible = false
            var userLimits = datas.data['UserLimits']
            userLimits = JSON.parse(datas.data["UserLimits"]);
            this.$store.dispatch('saveUserStoreLimits', userLimits)

          }
        }
      })
    },
    tabClick(index) {
      const that = this

      if (process.env.NODE_ENV !== 'production') {
        //   that.userVisible = true
        // if(index==5){
        //   this.is_showSpotCheck = true
        // }

        // that.user.password = "";
        // return
      }
      switch (index) {
        case 1:
          if (that.role == 1) {
            this.passwordIsError = false;
            that.userVisible = true
            that.user.password = "";
          } else {
            MessageBox('确定要退出登录吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const data1 = {
                type: 1,
                value: that.role
              }
              that.qtCall.JsToQt("NeedOperate", data1); //可以传给qt
              localStorage.setItem('lastDate', '')
            }).catch(() => {

            });
          }
          break;
        case 2:
          // this.runStatus = !this.runStatus

          const data2 = {
            type: 2,
            value: this.runStatus
          }
          console.log('打印NeedOperate',data2)
          this.qtCall.JsToQt("NeedOperate", data2); //可以传给qt
          break;
        case 3:
          const data3 = {
            type: 3,
          }
          this.qtCall.JsToQt("NeedOperate", data3);
          break;
        case 4:
          const data4 = {
            type: 4,
            value: 1
          }
          this.qtCall.JsToQt("NeedOperate", data4); //可以传给qt
          break;
        case 5: //点检
          const data5 = {
            type: 5,
            value: 1
          }
          console.log('abcdefg')
          this.is_showSpotCheck=true
          this.is_disSpotCheckManual = false
          this.spotCheckRetInfo.auto_hard.percentage = 0
          this.spotCheckRetInfo.auto_soft.percentage = 0
          this.spotCheckLogs = []
          if (process.env.NODE_ENV === 'production') {
            this.qtCall.JsToQt("NeedOperate", data5); //可以传给qt
            console.log('NeedSoftwareSpotStart-jstoqt')
            // this.qtCall.JsToQt("NeedSoftwareSpotStart",{})
          }
          break;
        default:
          // 如果 expression 不匹配任何 case 值，则执行 default 子句中的代码块
          break;
      }
    },
    manualSpotCheck(){
      this.is_showSpotCheckManual = true
      this.$qtCall.JsToQt("NeedStartSpotCheckManual",{})

    },
    init2() {
      const chartDom2 = document.getElementById('echartsDom2');
      if (!chartDom2) {
        return
      }
      if (!this.myChart2) {
        this.myChart2 = echarts.init(chartDom2);

      }
      const dataTitleFl = []
      const dataValFl = []
      for (var j = 0; j < this.flDefectTop.length; j++) {
        dataTitleFl.push(this.flDefectTop[j].label)
        dataValFl.push(this.flDefectTop[j].value)
      }
      this.option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: params => {
            // 提取公共的时间轴标签
            const axisLabel = params[0].name;
            // 初始化总和变量
            let total_num = 0;
            // 处理 tooltip 显示内容
            const tooltipContent = params.map(item => {
              const marker = item.marker; // 获取对应颜色的实心点符号
              const value = `&nbsp;&nbsp;&nbsp;<strong>${parseInt(item.value)}</strong>`; // 加黑加粗
              total_num += parseInt(item.value); // 累加总和

              // 检查是否为 'other' 系列
              if (item.name === '其它') {
                // 如果是 'other' 系列，详细列出其中的各项信息
                const otherDetails = this.flOther.map(o_item => {
                  const otherLabel = `${marker}${o_item.label}: &nbsp;&nbsp;&nbsp;<strong>${parseInt(o_item.value)}</strong>`;
                  return otherLabel;
                }).join('<br/>');
                // 将 'other' 系列的详细信息加入 tooltip
                return `${otherDetails}`;
              }

              // 其他系列保持原样，但加黑加粗
              return `${marker}${value}`;
            }).join('<br/>');

            // 最后添加总和
            const totalLine = `<br/><br/><strong>总和: &nbsp;&nbsp;&nbsp;</strong><strong>${total_num}</strong>`;
            return `${axisLabel}<br/><br/>${tooltipContent}${totalLine}`;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: dataTitleFl,

        },
        series: [{
          name: '',
          type: 'bar',
          data: dataValFl,
          itemStyle: {
            color: function (params) {
              // params是一个包含数据信息的对象，这里可以通过数据索引返回不同的颜色
              var colorList = [
                '#0F62FE', '#6BB2FB', '#F061E7', '#FFDA2E', '#8A3BEF',
                '#09DA97', '#6884FF', '#FFA495', '#87D46A', '#6699FF'
              ];
              return colorList[params.dataIndex];
            }
          }
        }, ]
      };
      this.myChart2.setOption(this.option2);
      this.myChart2.resize();
    },
    init() {
      const chartDom = document.getElementById('echartsDom');
      if (!chartDom) {
        return
      }
      if (!this.myChart) {
        this.myChart = echarts.init(chartDom);
      }
      const dataTitleWg = []
      const dataValWg = []

      for (var i = 0; i < this.wgDefectTop.length; i++) {
        dataTitleWg.push(this.wgDefectTop[i].label)
        dataValWg.push(this.wgDefectTop[i].value)
      }

      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: params => {
            // 提取公共的时间轴标签
            const axisLabel = params[0].name;
            // 初始化总和变量
            let total_num = 0;
            // 处理 tooltip 显示内容
            const tooltipContent = params.map(item => {
              const marker = item.marker; // 获取对应颜色的实心点符号
              const value = `&nbsp;&nbsp;&nbsp;<strong>${parseInt(item.value)}</strong>`; // 加黑加粗
              total_num += parseInt(item.value); // 累加总和

              // 检查是否为 'other' 系列
              if (item.name === '其它') {
                // 如果是 'other' 系列，详细列出其中的各项信息
                const otherDetails = this.wgOther.map(o_item => {
                  const otherLabel = `${marker}${o_item.label}: &nbsp;&nbsp;&nbsp;<strong>${parseInt(o_item.value)}</strong>`;
                  return otherLabel;
                }).join('<br/>');
                // 将 'other' 系列的详细信息加入 tooltip
                return `${otherDetails}`;
              }

              // 其他系列保持原样，但加黑加粗
              return `${marker}${value}`;
            }).join('<br/>');

            // 最后添加总和
            const totalLine = `<br/><br/><strong>总和: &nbsp;&nbsp;&nbsp;</strong><strong>${total_num}</strong>`;
            return `${axisLabel}<br/><br/>${tooltipContent}${totalLine}`;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: dataTitleWg,

        },
        series: [{
          name: '',
          type: 'bar',
          data: dataValWg,
          itemStyle: {
            color: function (params) {
              // params是一个包含数据信息的对象，这里可以通过数据索引返回不同的颜色
              var colorList = [
                '#0F62FE', '#6BB2FB', '#F061E7', '#FFDA2E', '#8A3BEF',
                '#09DA97', '#6884FF', '#FFA495', '#87D46A', '#6699FF'
              ];
              return colorList[params.dataIndex];
            }
          }
        }, ]
      };

      this.myChart.setOption(this.option);
      this.myChart.resize();
    },
    clearLogs() {
      this.logs = [];
      this.warnLog = [];
    },
    handleScroll() {
      const consoleOutput = this.$refs.consoleOutput;
      this.userScrolled = consoleOutput.scrollTop + consoleOutput.clientHeight + this.scrollThreshold < consoleOutput.scrollHeight;
    },
    handleScrollLog() {
      const consoleOutputLog = this.$refs.consoleOutputLog;
      this.userScrolled = consoleOutputLog.scrollTop + consoleOutputLog.clientHeight + this.scrollThreshold < consoleOutputLog.scrollHeight;
    },
    handleScrollCheck() {
      const consoleOutputCheck = this.$refs.consoleOutputCheck;
      this.userScrolled = consoleOutputCheck.scrollTop + consoleOutputCheck.clientHeight + this.scrollThreshold < consoleOutputCheck.scrollHeight;
    },

    scrollToBottom() {
      this.$nextTick(() => {
        setTimeout(() => {
          const consoleOutput = this.$refs.consoleOutput;
          if (consoleOutput && !this.userScrolled) {
            consoleOutput.scrollTop = consoleOutput.scrollHeight;
          }
          const consoleOutputLog = this.$refs.consoleOutputLog;
          consoleOutputLog.scrollTop = consoleOutputLog.scrollHeight;
        }, 100); // 设置延迟，确保 DOM 渲染完成
      });
    },
    resetPasswordError() {
      this.passwordIsError = false;
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
.main_bottom {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #fff;

  border-bottom: 3px solid #ECEEF1;
  height: calc(100% - 90px);

  .main_content_bottom {
    display: flex;
    flex-direction: row;
    flex: 1;

    .bottom_list {
      display: flex;
      flex-direction: column;
      flex: 1;

      .top_center_title {
        padding-left: 15px;
        font-weight: 600;
        font-size: 16px;
        color: #2A2A2A;
        height: 40px;
        line-height: 40px;

      }

      .bottom_status {
        border-radius: 10px;
        width: calc(100% - 30px);
        margin-left: 5px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .status_content {
          width: 96%;
          margin-left: 0;
          overflow-y: auto;
          height: calc(100% / 2 - 10px);
          margin-top: 0px;
          font-size: 12px;
          color: #2A2A2A;
          line-height: 22px;
        }

        .status_content::-webkit-scrollbar {
          width: 2px;
          opacity: 0.1;
        }

        .status_content::-webkit-scrollbar-thumb {
          border-radius: 2px;
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: transparent;
        }

        .status_content::-webkit-scrollbar-track {
          width: 2px;
        }
      }
    }
  }

  .main_content_top {
    display: flex;
    height: 430px;
    flex-direction: row;
    border-bottom: 2px solid #EBEFF5;

    .top_left {
      width: 380px;
      display: flex;
      height: 100%;
      flex-direction: column;
      border-right: 2px solid #EBEFF5;

      .top_left_title {
        height: 50px;
        line-height: 50px;
        padding-left: 15px;
        font-weight: 600;
        font-size: 16px;
        color: #2A2A2A;
        border-bottom: 2px solid #EBEFF5;
        box-sizing: border-box;
        // background-image: url('../../assets/ic_homepage_more.png');
        // background-position: right;
        // background-repeat: no-repeat;
        // background-size: 10px 10px;
        padding-right: 10px;
        cursor: pointer;
      }

      .top_left_content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .content_item {
          display: flex;
          height: 120px;
          justify-content: center;
          align-items: center;
          width: calc(100% / 2 - 5px);

          .item_content {
            display: flex;
            flex-direction: column;
            font-size: 14px;
            color: #fff;
            height: 110px;
            width: 100%;
            border-radius: 2px;

            .item_text {
              width: 100%;
              padding-left: 15px;
              line-height: 30px;
              height: 20px;
            }

            .item_src {
              width: 90%;
              margin-left: 5%;
              height: 40px;
              margin-top: 10px;
              background-color: #fff;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .item_white {
              width: 90%;
              margin-left: 5%;
              height: 28px;
              line-height: 14px;
              background-color: #fff;
              color: #2A2A2A;
              font-size: 10px;
              word-wrap: break-word;
            }
          }
        }
      }
    }

    .top_right {
      display: flex;
      flex-direction: column;
      flex: 1;
      border-left: 2px solid #EBEFF5;

      .right_item {
        display: flex;
        height: calc(100% / 6);
        border-bottom: 2px solid #EBEFF5;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding-left: 20px;
        box-sizing: border-box;

        .right_img {
          width: 54px;
          height: 54px;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .right_text {
          padding-left: 10px;
          font-weight: 600;
          font-size: 16px;
          width: 80px;
          color: #2A2A2A;
        }
      }
    }

    .top_center {
      display: flex;
      flex-direction: column;
      width: 1325px;
      height: 280px;

      .bottom_table {

        flex: 1;
        display: flex;

        margin: 0px 20px 20px 20px;

        .table_list {
          display: flex;
          width: 100%;
          max-height: 250px;
          min-height: 160px;
          overflow-y: auto;
          overflow-x: hidden;
          flex-direction: column;
          border-left: 1px solid #F0F3F8;
          border-right: 1px solid #F0F3F8;

          .table_content {
            display: flex;
            border-left: 1px solid #F0F3F8;
            border-right: 1px solid #F0F3F8;
            height: 120px;

            .table_item {
              display: flex;
              flex-direction: column;
              flex: 1;

              .item_main {
                height: 40px;
                line-height: 40px;
                box-sizing: border-box;
                padding-left: 20px;
                font-weight: 600;
                font-size: 14px;
                color: #2A2A2A;
                border-bottom: 1px solid #F0F3F8;
              }
            }
          }

          .table_title {
            flex: 1;

            background-color: #EBEFF5;
            text-align: left;
            line-height: 40px;
            height: 40px;
            font-weight: 600;
            font-size: 14px;
            color: #2A2A2A;
            height: 50px;
            display: block;
            float: left;

            .title_item {
              flex: 1;
              text-align: center;
              box-sizing: border-box;
              text-indent: 15px;
              // padding-left: 20px;
              width: 33.2%;
              float: left;
              height: 40px;
            }
          }
        }

        // /deep/ .el-table .el-table__cell{
        //   padding: 0px;
        //   height: 40px;
        // }
        // /deep/ .el-table .cell{
        //   padding: 0px;
        //   text-indent: 10px;
        // }
      }

      .top_center_title {
        padding-left: 15px;
        font-weight: 600;
        font-size: 16px;
        color: #2A2A2A;
        height: 40px;
        line-height: 40px;

        .title_edit {
          width: 10px;
          height: 12px;
          position: absolute;
          right: 30px;
          top: 0px;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .top_center_content {
        display: flex;
        height: 180px;
        border-bottom: 2px solid #ECEEF1;

        .content_item {
          display: flex;
          flex: 1;
          flex-direction: column;
          margin: 15px 0;
          justify-content: space-between;
          align-items: center;

          .list_item {
            height: 90px;
            width: 300px;
            background: #E9F1FB;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .item_text1 {
              font-weight: 600;
              font-size: 18px;
              color: #2A2A2A;
              padding-left: 30px;
            }

            .item_text2 {
              font-weight: 600;
              font-size: 18px;
              color: #116DEE;
              padding-top: 10px;
              padding-left: 30px;
            }
          }
        }
      }
    }
  }
}

.top_center_title {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 水平分布 */
}

.top_center_title p {
  margin: 0; /* 移除段落默认的 margin */
}

</style>
